import React, { useState } from 'react';
import style from './index.module.css';

function GaodingTopVideo() {
  const [isModalOpen, setIsModalOpen] = useState(false); // 控制遮罩层的状态
  const [selectedOption, setSelectedOption] = useState(null); // 跟踪选中的按钮

  const handleConsultClick = () => {
    setIsModalOpen(true); // 点击后打开遮罩层
  };

  const handleCloseModal = () => {
    setIsModalOpen(false); // 关闭遮罩层
  };

  const handleButtonClick = (option) => {
    setSelectedOption(option); // 更新选中的按钮状态
  };

  return (
    <div className={style.gaodingTopVideo}>
      <div className={style.videoContainer}>
        <video 
          className={style.videoBackground}
          src="https://cdn.dancf.com/fe-assets/20231204/ac0f2eb25a81c4ec41964ed319a08eb7.webm" 
          autoPlay 
          loop 
          muted 
          playsInline
        />
        <div className={style.container}>
          <h1>视觉内容创新方案</h1>
          <br />
          <h1 className={style.h}>驱动企业营销增长</h1>
          <p>
            全链路数字化内容中台，助力企业营销降本增效，为数字化时代<br />
            快速迭代的内容营销持续赋能
          </p>
          
          <img 
            loading="lazy" 
            src="https://cdn.dancf.com/iliad/dist/prod/577/dist/images/49cb331f-096d-42e2-8369-af837ee144d9.webp" 
            className={style.iliadImage} 
          />
          
          <div>
            {/* 点击后弹出遮罩层 */}
            <h1 className={style.zi} onClick={handleConsultClick}>立即咨询</h1>
          </div>
        </div>
      </div>

      {/* 遮罩层 */}
      {isModalOpen && (
        <div className={style.modalOverlay} onClick={handleCloseModal}>
          <div className={style.modalContent} onClick={(e) => e.stopPropagation()}>
            <div className={style.modalHeader}>  
              <h2>立即申请产品试用</h2>
              <p>通过内容力赋能业务增长力</p>
            </div>
            <p style={{marginLeft:'90px',marginTop:'20px'}}>提交信息后，工作时间咨询顾问会在2小时内为您提供专属服务</p>
            <span onClick={handleCloseModal} className={style.spanX}>x</span>
         
            <div className={style.modalBody}>
              <p><span>*</span>姓名</p>
              <input type="text" placeholder='请输入您的姓名' />
              <p><span>*</span>手机号</p>
              <input type="text" placeholder='请输入正确的手机号码' />
              <p><span>*</span>企业名称</p>
              <input type="text" placeholder='请输入您所在的企业名称' />
              <p><span>*</span>需要使用产品的人数</p>
              <button 
                className={`${style.optionButton} ${selectedOption === 'single'}`}
                onClick={() => handleButtonClick('single')}
              >
                单人使用
              </button>
              <button 
                className={`${style.optionButton} ${selectedOption === '2-20' }`}
                onClick={() => handleButtonClick('2-20')}
              >
                2-20人
              </button>
              <button 
                className={`${style.optionButton} ${selectedOption === '20+' }`}
                onClick={() => handleButtonClick('20+')}
              >
                20人以上
              </button>
            </div>
            <button className={style.btn}>提交</button>
          </div>
        </div>
      )}
    </div>
  );
}

export default GaodingTopVideo;
